<template>
  <div>
    <a-card>
      <!-- <a-form-model :model="queryParam" v-bind="layout">
        <a-row>
          <a-col :xs="24" :sm="24" :md="18" :lg="12" :xl="8" :xxl="8">
            <a-form-model-item>
              <div class="sch">
                <a-input v-model="queryParam.type" />
                <a-button type="primary" class="search" @click="search"
                  >搜索</a-button
                >
                <a-button type="primary" @click="addUser">添加</a-button>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="18" :lg="12" :xl="8" :xxl="8"> </a-col>
        </a-row>
      </a-form-model> -->
      <!-- 表格 -->
      <tree-table
        :data="categoryList"
        :expand-type="false"
        :selection-type="false"
        show-index
        class="treetable"
        index-text="#"
        stripe
        border
        :show-row-hover="false"
        :columns="columns"
      >
        <!-- 是否有效 -->
        <!-- <template slot='isok' v-slot="scope"> -->
        <template slot-scope="record" slot="isok">
          <i v-if="record.cat_deleted === false" style="color: lightgreen"
            >有效</i
          >
          <i style="color: red" v-else>无效</i>
        </template>
        <!-- 排序 -->
        <template slot-scope="record" slot="order">
          <a-tag size="mini" v-if="record.cat_level === 0">一级</a-tag>
          <a-tag size="mini" color="pink" v-else-if="record.cat_level === 1"
            >二级</a-tag
          >
          <a-tag size="mini" color="blue" v-else>三级</a-tag>
        </template>
        <!-- <template slot-scope="record">
          <a-button
            type="primary"
            @click="showeditCateDialog(record)"
            size="mini"
            >编辑</a-button
          >
          <a-button type="danger" @click="removeCate(record)" size="mini"
            >删除</a-button
          >
        </template> -->
        <span slot="action" slot-scope="text, record">
          <span class="edit" @click="editUser(record)">修改</span>
          <a-divider type="vertical"></a-divider>
          <span class="del" @click="delUser(record)">删除</span>
        </span>
      </tree-table>
      <a-pagination
        show-size-changer
        v-model="current"
        :page-size.sync="pageSize"
        :total="total"
        @change="onShowSizeChange"
        @showSizeChange="onShowSizeChange"
      />
      <!-- <a-table
        :row-key="(record) => record.cat_id"
        :columns="columns"
        :data-source="catData.categoryList"
        :pagination="pagination"
        @change="handleTableChange"
        bordered
      >
        <span slot="action" slot-scope="text, record">
          <i class="el-icon-success" v-if="record.cat_deleted === false" style="color: lightgreen"></i>
            <i class="el-icon-error" style="color: red" v-else></i>
        </span>
        
      </a-table> -->
    </a-card>
  </div>
</template>

<script>
import { getCatList } from "@/network/category";
export default {
  components: {},
  data() {
    return {
      queryParam: {
        type: 3,
        pagenum: 3,
        pagesize: 5,
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 15 },
      },
      categoryList: [],
      total: 0,
      pageSize: 10,
      current: 1,
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
          align: "center",
        },
        {
          label: "是否有效",
          // 表示,将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "isok",
          align: "center",
        },
        {
          label: "排序",
          // 表示,将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "order",
          align: "center",
        },
        {
          label: "操作",
          // 表示,将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "action",
          align: "center",
        },
      ],
    };
  },
  created() {
    this.getCatList();
  },
  watch: {
      // 监听页码的改变
    // pageSize(newValue) {
    //   this.pageSize = newValue;
    //   this.getCatList();
    // },
    // current(newpage) {
    //   this.current = newpage;
    //   this.getCatList();
    // },
  },
  methods: {
    onShowSizeChange(current1, pageSize1) {
      this.current = current1;
      this.pageSize = pageSize1;
      this.getCatList();
    },
    getCatList() {
      const params = {
        type: this.queryParam.type,
        pagenum: this.current,
        pagesize: this.pageSize,
      };
      getCatList(params).then((res) => {
        this.categoryList = res.data.result;
        this.total = res.data.total;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.sch {
  display: flex;
}
.search {
  margin-left: 10px;
  margin-right: 10px;
}
</style>